<template>
  <div class="login">
    <h1>海底捞火锅</h1>
    <h2>登录页面</h2>
    <el-form
      label-width="80px"
      :model="form"
    >
      <el-form-item label="账号">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input show-password v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login(form)">登录</el-button>
        <el-button :plain="true" type="primary" @click="$router.push('/register')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
   data() {
      return {
        form: {
          username: '',
          password: '',
        }
      };
    },
  methods: {
   async login(form){
      const res = await axios({
        url:'/api/user/login',
        method:'post',
        data:form
      })
      if(res.data.ActionType==='ok'){
        this.$message({
          message:'登陆成功',
          type:'success',
          duration:1000
        })
        this.$store.commit("ADD_INFORMATION",res.data.data)
        localStorage.setItem('name',form.username)
        this.$router.push('/index')
      }else{
        this.$message({
          message:'账号或密码错误',
          type:'warning',
          duration:1000
        })
      }
    }
  },
};
</script>

<style lang = "less" scoped>
.login{
  position: fixed;
  /* padding: 20px; */
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(150, 78, 90, 0.438);
  text-align: center;
  width: 500px;
  height: 300px;
  h1{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 25px;
  }
  h2{
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    background-color: rgb(100, 144, 180);
  }
  .el-form{
    width: 60%;
    text-align: center;
    margin: 0 auto;
    .el-form-item{
    width: 250px;
  }
  }
  
}
</style>